前言

非同步函式與同步函式是非常多人所誤解

1. 同步(Synchronous)函式為逐行運作,當A沒完成B會傻傻地等
2. 非同步(Asynchronous)函式為避免程式阻塞,影響到使用體驗等等,若A需要時間,會繼續執行B,並且若A完成便會呼叫執行A。

先來看一下同步

console.log('1')
console.log('2')

這樣就是了?

這跟平常JavaScript有什麼兩樣???

沒錯!!! JavaScript其實只有一條主程式(single thread),所以很容易會阻塞。

而當我們要去獲取外部的資料,舉例: 我要去中央氣象局透過api拿溫度資料。

我們的步驟如下:

1. 透過呼叫非同步函式(ajax) 去中央氣象局幫我拿取資料
2. 在資料沒拿回來之前,我先去執行剩餘的程式
3. 非同步函式說他OK了(資料回傳成功)
4. 主程式再呼叫非同步函式繼續執行

更直白的說法,在餐廳中:

1. 服務生先去幫第一組客人點餐
2. 把點餐單傳給廚房,廚房會負責製作好餐點
3. 並且繼續為下一組客人點餐
4. 接著主廚說第一組餐點好了,這時候正在為第二組人點餐的服務生,必須快點把第二組點完,然後先去廚房把餐點遞給第一組客人(也就是結單)
5. 繼續為下一組客人點餐

而JavaScript就是使用非同步的方式製造有多工的假象。

其實setTimeout就是web api(非同步函式)

function Getdata() {
  console.log('1');
  setTimeout(function() {
    console.log('2, 等我1秒');
  },1000)
  console.log('3');
}
Getdata()
/*
1
3
2 等我1秒
*/

只要用到web api,不論是否為0秒都要等待被呼叫

function Getdata() {
  console.log('1');
  setTimeout(function() {
    console.log('2, 等我0秒');
  },0)
  console.log('3');
}
Getdata()
/*
1
3
2 等我0秒
*/

明天我們會進入Promise,看Promise如何解決callback的痛點!!!